<template id="successDaily">
  <div class="successDaily">
    <div class="row payDailyHeader">
      <p class="payDailyName col_333">2017年10月党费</p>
      <p class="payDailyCost col_0ae">1,230,00</p>
    </div>
    <div class="row payDailyList">
      <div class="col ListInfo">
        <span>缴费对象</span>
        <span class="col_333">*晓妮 001</span>
      </div>
    </div>
    <div class="row payDailyList">
      <div class="col ListInfo">
        <span>缴费流水号</span>
        <span class="col_333">233333</span>
      </div>
    </div>
    <div class="row payDailyList">
      <div class="col ListInfo" style="border-bottom: none;height: 0.44rem">
        <span>交易时间</span>
        <span class="col_333">2017-11-21 17:32:66</span>
      </div>
    </div>
    <div class="row payDailyList" style="margin-top: 0.1rem">
      <div class="col ListInfo" style="border-bottom: none;height: 0.44rem;position: relative">
        <span>支付方式</span>
        <!--微信支付-->
        <div class="payWayBox" v-if="isCord">
          <i class="icon iconfont icon-payWay">&#xe604;</i>
          <span class="col_333 payWay">微信支付</span>

        </div>
        <!--银行卡样式-->
        <div class="cdCardBox" v-else>
          <i class="icon iconfont icon-cdCardBox"></i>
          <span class="col_333 cdCardBoxSty">中国银行借记卡(尾号9527)</span>

        </div>

      </div>
    </div>
        <pop-up :isShow="isShow"></pop-up>
  </div>
</template>

<script>
  import logo from '../../assets/image/bannerLogo1.png'
  import PopUp from "../common/popUp";
  export default {
    components: {PopUp},
    data(){
      return {
        isCord:false,
        isShow:true
      }
    },
    methods: {

    }
  }
</script>

<style scoped>
  @import "../../style/common.css";
  @import "../../assets/css/iconfont.css";
  .payDailyHeader{
    height: 1.06rem;
    background-color: #fff;
    position: relative;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
  }
  .payDailyName{
    font-size: 0.14rem;
    position: absolute;
    top: 0.31rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);

  }
  .payDailyCost{
    font-size: 0.24rem;
    position: absolute;
    top: 0.62rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  .payDailyList{
    background-color: #fff;

  }
  .ListInfo{
    height: 0.435rem;
    border-bottom: 1px solid #eee;
  }
  .ListInfo span{
    line-height: 0.44rem;

  }
  .ListInfo span:first-child{
    padding-left: 0.1rem;
    display: inline-block;
    width: 0.9rem;
    font-size: 0.13rem;
    color: #999;
  }
  .ListInfo span:last-child{
    font-size: 0.14rem;
  }
  .payWay{
    height: 0.44rem;
    background-color: #fff;
    margin-right: 0.1rem;
    font-size: 0.14rem;

  }
  .icon-payWay{
    font-size: 0.17rem;
    color: #24af41;


  }
  .payWayBox{
    height: 100%;
    float: right;
    right: 0;

  }
  .payLogo{
    height: 0.25rem;
    position: absolute;
    left: 0;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .cdCardBox{
    height: 100%;
    width: 80%;
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;


  }

  .icon-cdCardBox{
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    background-image: url("../../assets/image/paysign3.png");
    -webkit-background-size:0.2rem;
    -o-background-size: 0.2rem;
    background-size:0.2rem;
    background-repeat: no-repeat;
    margin-top: 0.12rem;

  }

  .cdCardBoxSty{
    float: right;
    padding-left: 0.1rem;
    padding-right: 0.1rem;

  }
</style>
